<template>
<div>
    <el-row>
      <el-col :span="24">
        <!-- 删除过程中，不允许其他操作 -->
        <el-button v-if="!showDeleteCheckbox" type="primary" @click="updateTableItem()">新增</el-button>
        <!-- <el-button v-if="!showDeleteCheckbox" @click="showDeleteCheckbox = true;" type="danger">删除</el-button>
        <!-- 删除过程中，只出现确认删除按钮 -->
        <!-- <el-button v-if="showDeleteCheckbox" @click="deleteTableItem();showDeleteCheckbox = false;chosenItem;" type="danger">确认删除</el-button>
        <el-button v-if="showDeleteCheckbox" @click="showDeleteCheckbox = false;">取消</el-button> --> 
      </el-col>
    </el-row>
    <el-table stripe :data="tableData" style="border: 1px solid #ebebeb;border-radius: 3px;margin-top: 10px;">
      <el-table-column prop="tsId" label="id" width="100">
        <template slot-scope="scope">
          <!-- el-checkbox 多选框，checked 绑定是否选中，click 绑定点击事件 -->
          <el-checkbox v-if="showDeleteCheckbox" :checked="chosenItem.indexOf(scope.row.tsId) > -1" @change="toggleChosenItem(scope.row.tid)" style="margin-right: 5px;"></el-checkbox>
          <span>{{scope.row.tsId}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="date" label="日期" width="100"></el-table-column> -->
      <el-table-column prop="cTime" label="上课时间" width="100"></el-table-column>
      <el-table-column prop="xTime" label="下课时间" width="100"></el-table-column>
      <el-table-column prop="courseName" label="课程" width="200"></el-table-column>
      <el-table-column prop="crLocation" label="校区" width="100"></el-table-column>
      <el-table-column prop="crBuilding" label="楼牌号" width= "100"></el-table-column>
      <el-table-column prop="crName" label="教室号" width="100"></el-table-column>
      <el-table-column prop="className" label="班级"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150"> 
       
          <!-- 删除过程中，禁用其他操作 -->
         
          <!-- <el-button :disabled="showDeleteCheckbox" @click="deleteTableItem(scope.row.tid)" type="danger" size="small">删除</el-button> -->

            <template slot-scope="scope">
            <!-- <el-button :disabled="showDeleteCheckbox" @click="updateTableItem(scope.row.id)" type="info" size="small">编辑</el-button>   -->
          <el-button :disabled="showDeleteCheckbox" @click="deleteTableItem([scope.row.tsId])" type="danger" size="small">删除</el-button>
            <!-- <el-button :disabled="showDeleteCheckbox" @click="moveTableItem(scope.row.id, 'up')" size="small">上移</el-button>
          <el-button :disabled="showDeleteCheckbox" @click="moveTableItem(scope.row.id, 'down')" size="small">下移</el-button>   -->
        </template>  
         
  
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//import tableData from './tdata';

// 下面是 Vue 组件
export default {
  data() {
    return {
      tableData:[], // tableData: tableData 的简写
      dialogFormVisible: false, // 弹窗是否出现
      showDeleteCheckbox: false, // 是否批量删除
      chosenItem: [], // 选中的选项
    };
  },
  created() {
    this.getClassroomList();
  },
  methods: {
     getClassroomList()  {
      console.log('连接后端')
      this.axios({
        method: "get",
        url: "http://localhost:8080/sheZhi/"
      }).then(res => {
        this.tableData = res.data;
        
        console.log('获取数据成功')
      });
    },
   // 新增一个数据
     updateTableItem(tsId = 0){
      // 跳转到编辑页面，新增则传id为0，否则为编辑
      
        this.$router.push({name: 'ProductAdd'})
      
    },
      // 删除一个数据
       deleteTableItem(tsId) {
       console.log("连接删除后端"); 
       console.log(tsId)                          
       this.axios({
         method: "delete",
         url: "http://localhost:8080/sheZhi/"+tsId,
        
        
       }).then(() => {
         this.getClassroomList(),
         console.log("删除数据1111111");
       });
     },
   
    
    // // 切换选中的选项
    // toggleChosenItem(id){
    //   const index = this.chosenItem.findIndex(x => x.id === id);
    //   if(index > -1){
    //     // 有该选项则删除
    //     this.chosenItem.splice(index, 1);
    //   }else{
    //     // 无该选项则添加
    //     this.chosenItem.push(id);
    //   }
    // },
    // 提交新增/修改表单
    submitForm(){
      // 校验表单
      // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 校验通过
          this.dialogFormVisible = false; 
          this.updateTableItem(this.form);
        } else {
          // 校验失败
          return false;
        }
      });
    }
  }
};
</script>

<style>
</style>
